<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Unit test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../../lib/prototype.js" type="text/javascript"></script>
  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
  <script src="../../src/unittest.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../test.css" type="text/css" />
  <style type="text/css" media="screen">
    #style_test_1 { color:rgb(0, 0, 255); background-color: rgb(0, 0, 255); }
    blah { color:rgb(0, 255, 0); }
    #op2 { opacity:0.5;filter:alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(strength=10);}
  </style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
  Test element extensions
</p>

<!-- Log output -->
<div id="testlog"> </div>

<!-- Test elements follow -->
<div id="test_1" class="a bbbbbbbbbbbb cccccccccc dddd"> </div>

<div id="test_2" class="classA-foobar classB-foobar"> </div> <span> </span> 

<div id="style_test_1" style="display:none;"></div>
<div id="style_test_2" class="blah" style="font-size:11px;"></div>

<div id="style_test_3">blah</div>

<div id="test_whitespace"> <span> </span> 



<div><div></div> </div><span> </span>
</div>

<!-- Test Element opacity functions -->
<img id="op1" alt="op2" src="icon.png" style="opacity:0.5;filter:alpha(opacity=50)" />
<img id="op2" alt="op2" src="icon.png"/>
<img id="op3" alt="op3" src="icon.png"/>
<img id="op4-ie" alt="op3" src="icon.png" style="filter:alpha(opacity=30)" />

<!-- Test Element.childrenWithClassName -->
<div id="Container" class="moo hoo">
  <span id="1" class="firstClass">First class</span>
  <span id="2" class="secondClass">Second class</span>
  <span id="3" class="firstClass secondClass">First and Second class</span>
  <span id="4" class="thirdClass">Third class <span id="5" class="firstClass">Nested First class</span></span>
  
  <div id="collect">1<span class="ignore"><span class="someclass">2</span>3</span><ul><li class="ignore">4</li></ul></div>
  
</div>

<div id="perftest1"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

  new Test.Unit.Runner({
    
    test$: function() { with(this) {
      var elems = $A($('perftest1').childNodes)
      benchmark(function(){
        elems.each($)
      },1);
    }},
    
    testElementSetStyle: function() { with(this) {
      Element.setStyle('style_test_3',{ 'left': '2px' });
      assertEqual('2px', $('style_test_3').style.left);
      
      Element.setStyle('style_test_3',{ marginTop: '1px' });
      assertEqual('1px', $('style_test_3').style.marginTop);
      
      $('style_test_3').setStyle({ 'margin-top': '2px', left: '-1px' });
      assertEqual('-1px', $('style_test_3').style.left);
      assertEqual('2px', $('style_test_3').style.marginTop);
    }},
    
    testElementGetStyle: function() { with(this) {
      assertEqual("none",
        $('style_test_1').getStyle('display'));
        
      benchmark(function(){
        Element.getStyle('style_test_1','display')
      },1,'Element.getStyle');
        
      // not displayed, so "null" ("auto" is tranlated to "null")
      assertNull(Element.getStyle('style_test_1','width'));
      assertEqual("static",Element.getStyle('style_test_1','position'), "Note: Safari bug! (see http://bugzilla.opendarwin.org/show_bug.cgi?id=4125)");
      
      $('style_test_1').show();
      
      // from id rule
      assertEqual("rgb(0, 0, 255)",
        Element.getStyle('style_test_1','color'));
      assertEqual("rgb(0, 0, 255)",
        Element.getStyle('style_test_1','background-color'));
      
      assertEqual("block",
        Element.getStyle('style_test_2','display'));
      assertNotNull(Element.getStyle('style_test_2','width'));
      assertEqual("static",Element.getStyle('style_test_1','position'));
      // from style
      assertEqual("11px",
        Element.getStyle('style_test_2','font-size'));
      // from class
      assertEqual("rgb(0, 0, 255)",
        Element.getStyle('style_test_1','background-color'));
    }},
    
    testElementCleanWhitespace: function() { with(this) {
      Element.cleanWhitespace("test_whitespace");
      assertEqual(3, $("test_whitespace").childNodes.length);
      
      assertEqual(1, $("test_whitespace").firstChild.nodeType);
      assertEqual('SPAN', $("test_whitespace").firstChild.tagName);
      
      assertEqual(1, $("test_whitespace").firstChild.nextSibling.nodeType);
      assertEqual('DIV', $("test_whitespace").firstChild.nextSibling.tagName);
      
      assertEqual(1, $("test_whitespace").firstChild.nextSibling.nextSibling.nodeType);
      assertEqual('SPAN', $("test_whitespace").firstChild.nextSibling.nextSibling.tagName);
    }},
    
    testElementCollectTextNodes: function() { with(this) {
      assertEqual('1234', Element.collectTextNodes('collect'));
      assert(benchmark(function(){
        Element.collectTextNodes('collect')
      },50) < 1000);
      
      benchmark(function(){
        Element.collectTextNodes('collect')
      },10,'Element.collectTextNodes');
      
      assertEqual('1234', Element.collectTextNodesIgnoreClass('collect', 'somethingcompletelydifferent'));
      assertEqual('1',    $('collect').collectTextNodesIgnoreClass('ignore'));
      benchmark(function(){
        Element.collectTextNodesIgnoreClass('collect','ignore')
      },10,'Element.collectTextNodesIgnoreClass');
      
      assertEqual('134',  Element.collectTextNodesIgnoreClass('collect', 'someclass'));
    }},
    
    testElementOpacity: function() { with(this) {
      assertEqual(0.5, Element.getOpacity('op1'));
      assertEqual(0.5, $('op2').getOpacity());
      assertEqual(1.0, Element.getOpacity('op3'));
      
      Element.setOpacity('op1','0.3');
      $('op2').setOpacity('0.3');
      Element.setOpacity('op3','0.3');
      
      assertEqual(0.3, $('op1').getOpacity());
      assertEqual(0.3, Element.getOpacity('op2'));
      assertEqual(0.3, Element.getOpacity('op3'));
      
      if(navigator.appVersion.match(/MSIE/)) {
        assertEqual('alpha(opacity=30)', Element.getStyle('op1','filter'));
        assertEqual('progid:DXImageTransform.Microsoft.Blur(strength=10)alpha(opacity=30)', Element.getStyle('op2','filter'));
        assertEqual('alpha(opacity=30)', Element.getStyle('op3','filter'));
        assertEqual(0.3, Element.getOpacity('op4-ie'));
      }
    }},
    
    testElementChildrenWithClassName: function() { with(this) {
      var firstClassElems = Element.childrenWithClassName("Container", "firstClass");
      var secondClassElems = Element.childrenWithClassName("Container", "secondClass");
      var thirdClassElems = Element.childrenWithClassName("Container", "thirdClass");
      var nonExistentClassElems = Element.childrenWithClassName("Container", "");
    
      // Ensure the correct number of elements with corresponding classes have been found
      assertEqual(3, firstClassElems.length, "Did not find all elements defined with first class");
      assertEqual(2, secondClassElems.length, "Did not find all elements defined with second class");
      assertEqual(1, thirdClassElems.length, "Did not find all elements defined with third class");
    
    
      benchmark(function(){
        Element.childrenWithClassName("Container", "firstClass") 
      },1000,'Element.childrenWithClassName');
    
      // ... and that none that don't exist have been found.
      assert(nonExistentClassElems.length==0, "Found non-existent class elems!");
    
      // Ensure that the found elements are the correct ones.
      assertEqual("1", firstClassElems[0].id,
        "First element with firstClass definition found has id: " + firstClassElems[0].id);
      // (Prevent runtime errors -- if only one was found)
      if (firstClassElems.length > 1) {
        assertEqual("3", firstClassElems[1].id,
          "Second element with firstClass definition found has id: " + firstClassElems[1].id);
      }
      // (Prevent runtime errors -- if only one or two were found)
      if (firstClassElems.length > 2) {
        assertEqual("5", firstClassElems[2].id,
          "Third element with firstClass definition found has id: " + firstClassElems[2].id);
      }
    
      assertEqual("2", secondClassElems[0].id,
        "First element with secondClass definition found has id " + secondClassElems[0].id);
      // (Prevent runtime errors -- if only one was found)
      if (secondClassElems.length > 1) {
        assertEqual("3", secondClassElems[1].id,
          "Second element with secondClass definition found has id " + secondClassElems[1].id);
      }
    
      assertEqual("4", thirdClassElems[0].id,
        "First element with thirdClass definition found has id " + thirdClassElems[0].id);
    
    }}

  }, "testlog");
// ]]>
</script>
</body>
</html>